VUE过滤器的使用

vue过滤器可以在两个场景使用：

1.双花括号内
2.v-bind内

vue过滤器分为本地过滤器和全局过滤器。

本地过滤器使用例子：

<div id="app">
    <h1>{{ msg|CaseWrite }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        },
        filters:{
            CaseWrite:function (val) {
                return val.toUpperCase()
            }
        }
    })
</script>

如上所示，双花括号中使用本地过滤器的一个大写转小写的使用例子。

---

全局过滤器使用例子：

<div id="app">
    <h1>{{ msg|CaseWrite }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
    Vue.filter('CaseWrite',function (val) {
        return val.toUpperCase();
    })

    var vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        }
    })
</script>

如上所示，双花括号中使用全局过滤器的一个大写转小写的使用例子。

---

注意：全局过滤器需定义在vue实例创建之前。

---

vue过滤器还可以嵌套使用
以下是一个过滤器A处理msg之后，再传递给过滤器B处理的使用例子

<div id="app">
    <h1>{{ msg|CaseWrite|reversal }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
    Vue.filter('CaseWrite',function (val) {
        return val.toUpperCase()
    })
    Vue.filter('reversal',function (val) {
        return val.split('').reverse().join('');
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        }
    })
</script>